<template>
  <div>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#409EFF" style="padding-left:100px;padding-right:100px;">
    <!--<h2 style="color: #409eff;width: 200px;float: left;margin: 12px auto;">卷皮作业平台</h2>-->
    <div style="float:left;width:auto;margin-right:45px;margin-top: 8px;margin-bottom: 6px;">
      <img :src="logo" alt=""/>
    </div>
    <el-menu-item index="1" @click="showdata('10.205.140.14')">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">流 量 图</template>
      <el-menu-item index="2-1" @click="showdata('IDC出入流量图',1)">IDC巡检日报流量图</el-menu-item>
      <el-menu-item index="2-2" @click="showdata('各域名流量统计',2)">各域名流量统计</el-menu-item>
      <el-menu-item index="2-3" @click="showdata('卷皮办公网流量监控图',3)">卷皮办公网流量监控图</el-menu-item>
      <el-menu-item index="2-4" @click="showdata('办公网Ping检测图',4)">办公网Ping检测图</el-menu-item>
      <el-menu-item index="2-5" @click="showdata('Ufile流量监控',5)">Ufile流量监控</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">可用性检测</template>
      <el-menu-item index="3-1" @click="showdata('LVS访问统计',6)">LVS访问统计</el-menu-item>
      <el-menu-item index="3-2" @click="showdata('Nginx源站可用性',7)">Nginx源站可用性</el-menu-item>
      <el-menu-item index="3-3" @click="showdata('vts_源站可用性',8)">vts_源站可用性</el-menu-item>
    </el-submenu>

    <el-submenu index="4">
      <template slot="title">网宿CDN</template>
      <el-menu-item index="4-1" @click="showdata('CDN流量图')">CDN流量图</el-menu-item>
      <el-menu-item index="4-2" @click="showdata('源站可用率')">源站可用率</el-menu-item>
      <el-menu-item index="4-3" @click="showdata('源站响应时间')">源站响应时间</el-menu-item>
      <el-menu-item index="4-4" @click="showdata('回源时间统计')">回源时间统计</el-menu-item>
      <el-menu-item index="4-5" @click="showdata('可用率统计')">可用率统计</el-menu-item>
      <el-menu-item index="4-6" @click="showdata('状态码统计')">状态码统计</el-menu-item>
    </el-submenu>
    <el-menu-item index="5" @click="showdata('http://zabbix.juanpi.org/zabbix.php?action=dashboard.view')">Zabbix</el-menu-item>
    <div style="float:right;padding-top:12px;">
      <el-button type="text"><i class="fa fa-user"></i>-{{this.$store.state.user.user}}</el-button>
      <el-button type="text" style="color:#909399"  @click="logout">退出登录</el-button>
      <span style="color: #fff;">|</span>
      <router-link :to="{ path:'admin'}">
        <el-button class="filter-item" type="text" >管理后台</el-button>
      </router-link>
    </div>
  </el-menu>
  </div>
</template>
<script type="text/javascript">
  import logo from '@/assets/dashboard/logo.png'
  import store from '../../../store'
  import '@/assets/dashboard/bootstrap/css/bootstrap.css' // global css
  import '@/assets/dashboard/style.css'
  export default {
    props: {},
    data() {
      return {
        logo,
        tabs: [
          {
            href: 'http://oa.juanpi.org',
            label: 'OA',
            isSelected: false,
            tag: 'OA',
            show: true
          },
          {
            href: 'http://it.juanpi.org',
            label: 'IT',
            isSelected: false,
            tag: 'IT',
            show: true
          },
          {
            href: 'http://uwork.juanpi.org',
            label: 'Uwork',
            isSelected: false,
            tag: 'Uwork',
            show: true
          },
          {
            href: 'http://wiki.juanpi.org',
            label: 'Wiki',
            isSelected: false,
            tag: 'Wiki',
            show: true
          },
          {
            href: 'http://pms.juanpi.org',
            label: 'Pms',
            isSelected: false,
            tag: 'Pms',
            show: true
          }
        ],
        activeIndex2: '1'
      }
    },
    created() {
      this.selectTab(this.$route.meta.tag)
    },
    methods: {
      tografana() {
        this.$emit('showgrafana', true)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
          loading.close()
        }, 2000)
      },
      selectTab(tag) {
        this.tabs.forEach(tab => {
          tab.isSelected = (tab.tag === tag)
        })
      },
      // 退出
      logout() {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('LogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        }).catch(() => {})
      },
      showdata(url) {
        this.$emit('showdata', url)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        setTimeout(() => {
          loading.close()
        }, 2000)
      }
    }
  }
</script>
<style>
  .main-container {
    min-height: 100%;
    -webkit-transition: margin-left 0.28s;
    transition: margin-left 0.28s;
    margin-left: 0px;
  }
  .top-low {
    margin-top: 5px
  }
  .el-table th{
    background-color: #eef1f6;
  }
  .el-table thead {
    color:#606266;
  }
  .el-step__title.is-process{
    color:#409eff;
  }
  .el-step__title {
    font-size: 16px;
    line-height: 30px;
  }
  .navbar{
    margin-bottom: 0;
    z-index: 9;
    width: 100%;
    position: relative;
    background: #fff;
    font-size: 13px;
  }
  .navbar-inner {
    background: 0 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 85%;
    margin: auto;
    /*padding: 5px;*/
  }
  .navbar .container {
    width: 100%;
    min-width: 960px;
    margin: 0 auto;
    max-width: 100%;
  }
  .navbar .brand {
    float:left;width: auto;padding: 5px 20px;height: 34px;line-height: 34px;color: #ccc;font-weight: 700;display: block;margin-left: -20px;
    text-decoration:none;
    font-size: 32px;
  }
  .navbar .nav.pull-right {
    float: left;
    margin-right: 0;
  }
  .pull-right {
    float: left !important;
  }
  .navbar .nav>li {
    float: left;
  }
  a, .text-default {
    color: #fff;
  }
  .nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    font-size: 13px;
  }
  .nav > li > a:hover {
    color: #409eff;
  }
</style>
